﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="bootstrap default admin template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Typography | Prince Admin Template</title>


    <!-- Start global css -->
    <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
    <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
    <!-- End global css -->

    <!-- Start page plugin css -->
    <!-- End page plugin css -->

    <!-- Start template global css -->
    <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
    <!-- End template global css -->

    <!-- Start layout css -->
    <link rel="stylesheet" href="../../assets/layouts/layouts_left_menu/left_menu_layout.min.css"/>
    <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

</head>
<body class="nav-medium">
<div class="container body">
    <div class="main_container">
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light" href="index.html"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="sweetalerts.html"><i class="fa fa-window-maximize"></i> Popups</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="documentation.html"><i class="fa fa-cogs"></i> Documentation</a></li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="fa fa-cog" aria-hidden="true"></span>
            </a>
            <a class="toggle-fullscreen" data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="fa fa-arrows-alt" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="fa fa-lock" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="fa fa-power-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
    <!-- Start Contain Section -->
    <div class="container-fluid right_color">
        <div class="page-main-header">
            <!-- Page Title -->
            <h2 class="page-name-title">Typography</h2>
            <!--  Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="text-info">Components</li>
                <li class="active">Typography</li>
            </ol>
        </div>

        <div class="contain-section">
            <div class="contain-inner-section">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Headings</h2>
                            <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are
                                available. <code>.h1</code> through <code>.h6</code> classes are also available, for
                                when you want to match the font styling of a heading but still want your text to be
                                displayed inline.</p>
                        </div>
                        <div class="section-body">
                            <h1>h1. Heading H1</h1>
                            <h2>h2. Heading H2</h2>
                            <h3>h3. Heading H3</h3>
                            <h4>h4. Heading H4</h4>
                            <h5>h5. Heading H5</h5>
                            <h6>h6. Heading H6</h6>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start Stacked-to-horizontal section -->
                        <div class="section-header">
                            <h2>Styled headings</h2>
                            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code>
                                tag or the <code>.small</code> class.</p>
                        </div>
                        <div class="section-body">
                            <h1>h1. Heading H1
                                <small>Secondary Text</small>
                            </h1>
                            <h2>h2. Heading H2
                                <small>Secondary Text</small>
                            </h2>
                            <h3>h3. Heading H3
                                <small>Secondary Text</small>
                            </h3>
                            <h4>h4. Heading H4
                                <small>Secondary Text</small>
                            </h4>
                            <h5>h5. Heading H5
                                <small>Secondary Text</small>
                            </h5>
                            <h6>h6. Heading H6
                                <small>Secondary Text</small>
                            </h6>
                        </div>
                        <!-- End Stacked-to-horizontal section -->
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start Stacked-to-horizontal section -->
                        <div class="section-header">
                            <h2>Inline text elements</h2>
                            <p>You can use different types inline text elements.</p>
                        </div>
                        <div class="section-body">
                            <div class="row">
                                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                    <h5>Marked text</h5>
                                    <p>For highlighting a run of text due to its relevance in another context, use the
                                        <code>&lt;mark&gt;</code> tag.</p>
                                    <p>You can use the mark tag to
                                        <mark>highlight</mark>
                                        text.
                                    </p>

                                    <h5>Deleted text</h5>
                                    <p>For indicating blocks of text that have been deleted use the
                                        <code>&lt;del&gt;</code> tag.</p>
                                    <p>
                                        <del>This line of text is meant to be treated as deleted text.</del>
                                    </p>

                                    <h5>Strikethrough text</h5>
                                    <p>For indicating blocks of text that are no longer relevant use the
                                        <code>&lt;s&gt;</code> tag.</p>
                                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

                                    <h5>Inserted text</h5>
                                    <p>For indicating additions to the document use the <code>&lt;ins&gt;</code> tag.
                                    </p>
                                    <p>
                                        <ins>This line of text is meant to be treated as an addition to the document.
                                        </ins>
                                    </p>

                                    <h5>Underlined text</h5>
                                    <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
                                    <p><u>This line of text will render as underlined</u></p>

                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">

                                    <h5>Small text</h5>
                                    <p>You may alternatively use an inline element with <code>.small</code> in place of
                                        any <code>&lt;small&gt;</code>.</p>
                                    <p>
                                        <small>This line of text is meant to be treated as fine print.</small>
                                    </p>

                                    <h5>Bold</h5>
                                    <p>For emphasizing a snippet of text with a heavier font-weight.</p>
                                    <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>

                                    <h5>Italics</h5>
                                    <p>For emphasizing a snippet of text with italics.</p>
                                    <p>The following snippet of text is <em>rendered as italicized text</em>.</p>

                                    <h5>Basic abbreviation</h5>
                                    <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for
                                        abbreviations and acronyms to show the expanded version on hover.</p>
                                    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

                                    <h5>Initialism abbreviation</h5>
                                    <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.
                                    </p>
                                    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the
                                        best thing since sliced bread.</p>
                                </div>
                            </div>
                        </div>
                        <!-- End Stacked-to-horizontal section -->
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Lists - Unordered</h2>
                            <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
                        </div>
                        <div class="section-body list-typography">
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ul>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Lists - Ordered</h2>
                            <p>A list of items in which the order <em>does</em> explicitly matter.</p>
                        </div>
                        <div class="section-body list-typography">
                            <ol>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit</li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                                <li>Ac tristique libero volutpat at</li>
                            </ol>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Lists - Unstyled</h2>
                            <p>Remove the default <code>list-style</code> on items.</p>
                        </div>
                        <div class="section-body list-typography">
                            <ul class="list-unstyled">
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ul>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Addresses</h2>
                            <p>Present contact information for the nearest ancestor or the entire body of work. Preserve
                                formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
                        </div>
                        <div class="section-body">
                            <address><strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco,
                                CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890
                            </address>
                            <address><strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a>
                            </address>

                            <h5>Basic block</h5>
                            <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle
                                brackets in
                                the code for proper rendering.
                            </p>
                            <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

                            <h5>Inline</h5>
                            <p class="padding-b-0">Place all list items on a single line with <code>display:
                                    inline-block;</code> and some light padding.</p>
                            <ul class="list-inline">
                                <li>Lorem ipsum</li>
                                <li>Phasellus iaculis</li>
                                <li>Nulla volutpat</li>
                            </ul>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start Stacked-to-horizontal section -->
                        <div class="section-header">
                            <h2>Blockquotes</h2>
                            <p>For quoting blocks of content from another source within your document.</p>
                        </div>
                        <div class="section-body">
                            <h5>Naming a source</h5>
                            <p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source
                                work in <code>&lt;cite&gt;</code>.</p>
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                                    ante.</p>
                                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>

                            <h5>Alternate displays</h5>
                            <p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
                            <blockquote class="blockquote-reverse"><p>Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit. Integer posuere erat a ante.</p>
                                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>

                        </div>
                        <!-- End Stacked-to-horizontal section -->
                    </div>

                    <div class="clearfix"></div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Description</h2>
                            <p>A list of terms with their associated descriptions.</p>
                        </div>
                        <div class="section-body">
                            <dl>
                                <dt>Description lists</dt>
                                <dd>A description list is perfect for defining terms.</dd>
                                <dt>Euismod</dt>
                                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                <dt>Malesuada porta</dt>
                                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                            </dl>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Horizontal description</h2>
                            <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
                        </div>
                        <div class="section-body">
                            <dl class="dl-horizontal">
                                <dt>Description lists</dt>
                                <dd>A description list is perfect for defining terms.</dd>
                                <dt>Euismod</dt>
                                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                <dt>Malesuada porta</dt>
                                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                <dt>Felis euismod</dt>
                                <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris.
                                </dd>
                            </dl>
                        </div>
                        <!-- End grid options section -->
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                        <!-- Start grid options section -->
                        <div class="section-header">
                            <h2>Drop cap</h2>
                            <p>Use the class <code>.dropcap</code> let the first letter drop down of content texts.</p>
                        </div>
                        <div class="section-body">
                            <p><span class="drop-cap text-primary">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
                                Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique Tempore,
                                quos delectus asperiores libero voluptas.</p>

                            <p><span class="drop-cap text-success">D</span>orem ipsum dolor sit amet, consectetur adipisicing elit.
                                Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique Tempore,
                                quos delectus asperiores libero voluptas.</p>
                        </div>
                        <!-- End grid options section -->
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
</div>
</div>

<!-- Start core js -->
<script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
<script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
<script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Start core javascript -->

<!-- Start global js -->
<script src="../../assets/global/js/left-menu.min.js"></script>
<!-- End global js -->


<!-- Start page js -->

<!-- End page js -->

</body>
</html>